import './App.css';
import G6 from '@antv/g6';
import { useEffect } from "react";
let graph = null;
const width = 400;
const height = 400;
const stack = []
console.log('韩咯')
function App() {
  useEffect(() => {
      initCanvas()
  }, [])

    function getData(){
      return fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
            .then((res) => res.json())
    }

    function  createInstance(data) {
      if (!graph) {
          graph = new G6.TreeGraph({
              container: 'container',
              width,
              height,
              modes: {
                  default: [
                      {
                          type: 'collapse-expand',
                          onChange: function onChange(item, collapsed) {
                              const data = item.get('model');
                              data.collapsed = false;
                              return true;
                          },
                      },
                      'drag-canvas',
                      'zoom-canvas',
                  ],
              },
              defaultNode: {
                  size: 26,
                  anchorPoints: [
                      [0, 0.5],
                      [1, 0.5],
                  ],
              },
              defaultEdge: {
                  type: 'cubic-horizontal',
              },
              layout: {
                  type: 'mindmap',
                  direction: 'H',
                  getHeight: () => {
                      return 16;
                  },
                  getWidth: () => {
                      return 16;
                  },
                  getVGap: () => {
                      return 10;
                  },
                  getHGap: () => {
                      return 50;
                  },
              },
          });
      }

        let centerX = 0;
        graph.node(function (node) {
            if (node.id === 'Modeling Methods') {
                centerX = node.x;
            }

            return {
                label: node.id,
                labelCfg: {
                    position:
                        node.children && node.children.length > 0
                            ? 'left'
                            : node.x > centerX
                                ? 'right'
                                : 'left',
                    offset: 5,
                },
            };
        });
        graph.changeSize(width, height)
        graph.data(data);
        graph.render();
        graph.fitView();
        graph.on('node:click', (node) => {
            // const data = node.item._cfg.model
            // const {id,children} = data
            // if(children && Array.isArray(children) && children.length) {
            //     const lastData = stack[stack.length - 1]
            //     if(!lastData || lastData.id !== id) {
            //         stack.push(data)
            //     }
            // }
            // console.log('stack', stack)
            graph.changeData(node.item._cfg.model);
            graph.render();
            graph.fitView();
        })
    }
     function initCanvas (stackData) {
      if(stackData) {
         return createInstance(stackData)
      }
      getData().then(data => {
          createInstance(data)
      })
    }
    function back() {
      let data = null
      // if(stack.length) {
      //     data = stack.pop()
      //     console.log('stack-data', data)
      // }
        initCanvas(data)
    }
  return (
    <div id="container" className='container'>
        <div onClick={back.bind(this)} className="back">返回</div>
    </div>
  );
}

export default App;
